<template>
  <div class="i18n-crud-form">
    <el-card v-for="(item, index) in i18nList" :key="index" class="box-card" style="margin-bottom: 10px;">
      <div slot="header" class="clearfix">
        <span>{{ item.fieldDescribe }}</span>
      </div>
      <el-form ref="i18nForm" :inline="true" v-bind="$attrs" :model="item" v-on="$listeners">
        <el-form-item
          v-for="(itemSon, i) in item.values"
          :key="i"
          :label="itemSon.language"
          :rules="itemSon.isDefault === 1 ? {
            required: true, message: `${itemSon.language} is require`, trigger: 'blur'
          }: {}"
          :prop="'values.' + i + '.value'"
          style="width: 100%;"
        >
          <el-input
            v-model="itemSon.value"
            :maxlength="50"
            style="width: 400px;"
            :placeholder="itemSon.language === 'en'?'Suggest a maximum length of 13 strings':itemSon.language"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
import { getI18nKey, addI18n, editI18n } from '@/api/common'
export default {
  mixins: [crud()],
  props: {
    data: {
      type: Array,
      required: false,
      default: () => []
    },
    pageType: {
      required: true,
      type: Number
    },
    isCarList: {
      required: false,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      i18nList: [],
      rules: {
      }
    }
  },
  created() {
    // 初次创建不会调用crud钩子，在此赋值
    if (this.crud.status.add) {
      this.getKey()
    } else {
      this.i18nList = this.data ? this.data.concat() : []
    }
  },
  methods: {
    [CRUD.HOOK.beforeToAdd]() {
      this.getKey()
    },
    [CRUD.HOOK.beforeToEdit]() {
      this.i18nList = this.data ? this.data.concat() : []
    },
    [CRUD.HOOK.afterValidateCU]() {
      this.$refs['i18nForm'][0].validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (this.crud.status.add) {
            // 新增时把key的值和name添加到表单里
            this.i18nList.forEach((item) => {
              this.crud.form[item.fieldName] = item.resourceKey
            })
            addI18n({ list: this.i18nList }).then(() => {
              this.$emit('cb')
            })
          } else {
            editI18n({ list: this.i18nList }).then(() => {
              this.$emit('cbEdit')
            })
          }
        }
      })
    },
    getKey() {
      getI18nKey({ pageType: this.pageType }).then(res => {
        const list = res.data.list || []
        list.map((item, index) => {
          item.values.map((item2, index2) => {
            if (!item2.value) {
              list[index].values[index2].value = ''
            }
          })
        })
        this.i18nList = list
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-form-item--small .el-form-item__label {
    width: 100px;
    line-height: 32px;
}
// .i18n-crud-form {
//   .el-form {
//     .el-form-item {
//       width: 100%;
//       /deep/ .el-form-item__label {
//         width: 80px;
//       }
//       /deep/ .el-form-item__content {
//         width: 400px !important;
//       }
//     }
//   }
// }
</style>
